<!DOCTYPE html>  <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <title>方正硬笔书法评测</title> <link rel="stylesheet" href="styles/app.css"> <style type="text/css"> .test-btns {
      position: absolute;
      top: 0;
      width: 100%;
      padding: 4px;
    } </style> </head> <body ng-app="calligraphy"> <div id="wrapper" ng-controller="EmbedController"> <canvas id="strokes-canvas" resize="true" drawing=""></canvas> <div class="stroke-info stroke-title" ng-bind="title"></div> <div class="stroke-info stroke-time" ng-bind="time"></div> <div class="test-btns" ng-controller="TestController"> <button ng-click="setCharacter()">setCharacter</button> <button ng-click="penMoves()">penMoves</button> <button ng-click="clearBoard()">clearBoard</button> <button ng-click="evaluate()">evaluate</button> </div> </div> <script src="scripts/vendor.js"></script> <script src="scripts/app.js"></script> <script> angular.module('calligraphy')
      .controller('TestController', function($scope, $http, $timeout) {
        'use strict';

        $scope.setCharacter = function() {
          $http.get('test.json').then(function(response) {
            window.setCharacter(response.data);
          });
        };

        $scope.penMoves = function() {
          window.setBoard(140, 370, 180, 600);
          var points = [
            [145, 385], [145, 385], [145, 385], [145, 385], [145, 385],
            [145, 385], [145, 385], [145, 385], [145, 385], [145, 385],
            [145, 385], [147, 384], [149, 383], [152, 381], [153, 380],
            [154, 380], [154, 380], [155, 380], [155, 379], [156, 380],
            [158, 382], [160, 384], [162, 386], [163, 389], [163, 392],
            [164, 395], [164, 399], [165, 404], [166, 409], [166, 417],
            [167, 426], [168, 435], [168, 443], [168, 451], [168, 457],
            [186, 561], [187, 568], [177, 594], [177, 594], [177, 594],
            [177, 594]
          ];
          var i = -1;
          var loop = function() {
            if (++i < points.length) {
              $timeout(function() {
                if (i === 0) {
                  window.penDown(points[i][0], points[i][1]);
                }
                else if (i === points.length - 1) {
                  window.penUp(points[i][0], points[i][1]);
                }
                else {
                  window.penMove(points[i][0], points[i][1]);
                }
                loop();
              }, 200);
            }
          };
          loop();
        };

        $scope.clearBoard = function() {
          window.clearBoard();
        };

        $scope.evaluate = function() {
          var r = window.evaluate();
          console.assert(angular.isString(r), 'not JSON string');

          r = JSON.parse(r);
          console.assert(r.score, 'invalid JSON result');

          var text = '分数: ' + r.score;
          (r.errors || []).forEach(function(e) {
            console.assert(e.text, 'invalid errors');
            text += '\n' + e.text;
          });
          window.alert(text);
        };

      }); </script> 